<template>
	<view>
		<view class="title">登录</view>
		<view class="loginform">
			<view class="loginform-item">
				<text class="number-title">+86</text>
				<image class="down-icon" src="../../static/down.png">
					<input maxlength="11" type="number" placeholder="请输入您的手机号" placeholder-class="placeholderClass"
						v-model="mobile" />
			</view>
			<view class="loginform-item">
				<input class="textleft" password placeholder="请输入密码" placeholder-class="placeholderClass"
					v-model="password" />
			</view>

			<view class="btnbox">
				<button @click="loginGetCode">登录</button>
			</view>
			<view class="btnbox2">
				<button @click="register">注册</button>
			</view>

		</view>
		<view class="rule">
			<label class="radio">
				<radio value="r1" color="#37C2BC" checked="" />选中
			</label>

			<text>进入即代表同意</text>
			<text class="blue" @click="kf(1)">商家协议</text>和<text class="blue" @click="kf(2)">隐私协议</text>
		</view>

		<uni-popup ref="popup4" type="bottom">
			<view class="popup-content2">
				<view v-for="(item,index) in shopList" class="popup-btn " @click="select(item)">{{item.merchantName}}
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobile: '',
				password: '',
				provider: '',
				code: '',
				shopList: [],
				token: '',
				uid: ''
			}
		},
		onLoad() {

		},
		methods: {


			kf(type) {

				if (type == 1) {
					uni.navigateTo({
						url: '../usercenter/kf?url=' + encodeURIComponent(
							"https://mp.weixin.qq.com/s/8YPnaRfKZl9gaYJvlOFSnA")
					})
				} else {
					uni.navigateTo({
						url: '../usercenter/kf?url=' + encodeURIComponent(
							"https://mp.weixin.qq.com/s/8YPnaRfKZl9gaYJvlOFSnA")
					})
				}


			},
			register() {
				uni.redirectTo({
					url: '../register/register'
				})
			},
			getCode() {
				let _this = this;
				uni.showLoading({
					title: "授权获取中"
				})
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						let provider = res.provider;
						if (provider == 'weixin') {
							provider = "wechat";
						}
						_this.provider = provider;
						_this.$util.$setStorageSync("provider", provider)
					},
					fail: function(res) {
						uni.hideLoading();
					}
				});
				uni.login({
					provider: _this.$util.$getStorageSync("provider"),
					success: function(loginRes) {
						let code = loginRes.code;
						_this.code = code;
						uni.hideLoading();
						_this.login();
						console.info(code)

					},
					fail: function(res) {
						uni.hideLoading();

					}
				})
			},

			loginGetCode() {

				this.getCode();
			},

			select(item) {
				let param = {
					id: this.uid,
					shopId:item.id
				}
				let that = this;
				this.$api.updateOnlineStatus(param).then(res => {

					console.info("==updateOnlineStatus====" + JSON.stringify(res));
					if (res.code == 1) {
						that.$util.$setStorageSync("token", that.token);
						that.$refs.popup4.close();
						
						uni.navigateBack({
							delta:1
						})
					}else{
						that.$util.$showToast("修改失败，联系客服", '', 'none');
						
					}
				})
			},

			init() {
				let param = {
					id: this.uid
				}
				let that = this;
				this.$api.init(param).then(res => {

					console.info("==init====" + JSON.stringify(res));
					if (res.code == 1) {

						if (res.data == null) {
							that.$util.$setStorageSync("token", that.token);
							
							uni.navigateBack({
								delta: 1
							})
						} else {
							if (res.data.length == 1) {
								that.$util.$setStorageSync("token", that.token);
								
								uni.navigateBack({
									delta: 1
								})
							} else {
								that.shopList = res.data;
								that.$refs.popup4.open();
							}
						}
					}
				})
			},

			login() {
				let param = {
					mobile: this.mobile,
					password: this.password,
					code: this.code
				}
				let that = this;
				this.$api.login(param).then(res => {

					if (res.code == 1) {
						let token = res.data.token;
						let username = res.data.username;
						let mobile = res.data.mobile;
						let avatar = res.data.avatar;
						that.uid = res.data.id;
						that.token = token;
						that.$util.$setStorageSync("username", username);
						that.$util.$setStorageSync("mobile", mobile);
						that.$util.$setStorageSync("avatar", avatar);
						// uni.navigateBack({
						// 	delta: 1
						// })
						this.init();
					} else {
						that.$util.$showToast(res.msg, '', 'none');

					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.title {
		margin: 62rpx 94rpx;
		font-size: 54rpx;
		color: $uni-text-color;
	}
	
	.popup-content2 {
		background: #FFFFFF;
	
		.popup-btn {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-bottom: 1px solid #f5f5f5;
			background: #FFFFFF;
		}
	
		button::after {
			border: none;
		}
	
		.pt20 {
			border-bottom: 20rpx solid #f5f5f5;
		}
	}

	.loginform {
		margin: 95rpx 95rpx;

		.loginform-item {
			border-bottom: 1rpx solid #EFEFEF;
			display: flex;
			height: 135rpx;
			line-height: 135rpx;

			.down-icon {
				width: 30rpx;
				height: 30rpx;
				margin-top: 52rpx;
				margin-right: 20rpx;
			}

			.number-title {
				font-size: 30rpx;
				color: #666666;
			}

			input {
				margin-top: 52rpx;
				text-align: center;
				font-size: 32rpx;
				color: #454545;
			}

			.textleft {
				text-align: left;
			}
		}
	}

	.rule {
		position: absolute;
		bottom: 120rpx;
		width: 100%;
		text-align: center;
		color: $uni-text-color-grey;
		font-size: 24rpx;

		text {
			font-size: 24rpx;
			color: $uni-text-color-grey;
		}

		.blue {
			color: $uni-color-primary;
			text-decoration: underline;
			margin-left: 10rpx;
		}
	}

	.btnbox {
		margin-top: 69rpx;
	}

	.btnbox2 {
		margin-top: 20rpx;

	}
</style>
